<template>
	<view >
		<myHead :title="title" />
	<view class="content">
		<scroll-view scroll-y="true" >
		<uni-forms ref="form" >
			<uni-forms-item label="效果预览:" name="" labelPosition="top">
				<uni-swiper-dot :info="filesupload" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				    <swiper class="swiper-box" @change="change">
				        <swiper-item v-for="(item ,index) in filesupload" :key="index">
				            <view class="swiper-item">
				                 <image style="width:100%; height:200px; background-color: #eeeeee;" 
								 :mode="item.mode" :src="item.fileUrl"></image>
				            </view>
				        </swiper-item>
				    </swiper>
				</uni-swiper-dot>
			</uni-forms-item>
			<uni-forms-item label="" name="" labelPosition="top">
				<p type="textarea" disabled="true" style="color: red;" >
				请保证图片是651×365比例,否则图片会变形	
				</p>
			</uni-forms-item>
			<uni-forms-item label="上传文件">
				<uni-grid :column="1" class="files"  :showBorder="false"  :square="false" >
					<uni-grid-item class="header" >
						<button @click="chooseImg" class="headerbutton">+</button>
					</uni-grid-item>
				</uni-grid>
			</uni-forms-item>
			
			<uni-forms-item  class="content" v-for="(item,key) in filesupload" :key="key" labelPosition="left">
				<view >
					<image :src="item.fileUrl.replace('http://112.124.6.140:8090','/api')" mode=""></image>
					
					<span   class="delete"
						@click.stop="filesupload.splice(key,1)"> ×</span>
				</view>
				<!-- <view style="display: flex;justify-content: space-around;">
					<view>标题</view>
					<uni-easyinput  v-model="filesupload[key].content" placeholder="请输入描述" />
				</view> -->
				<uni-forms-item class="text-gray" label="标题" name="name" style="margin-top: 20upx;">
					<uni-easyinput  v-model="filesupload[key].content" placeholder="请输入描述" />
				</uni-forms-item>
			</uni-forms-item>
		</uni-forms>
		</scroll-view>
			<button type="default" @click="subimt" >提交</button>
	</view>
	</view>
</template>

<script>
	import{upBanner} from '@/api/api_notice.js'
	import myHeader from '../components/head.vue'
	export default {
		data(){
			return {
				title:"新闻编辑",
					mode: 'nav',
					dotsStyles:{
						bottom:5,
						color:"#FFF",
					},
				info: [
					// {
					// 	content: '习近平总书记在河南召开大会',
					// 	src:'../../static/party_building/assets/img/one.jpg'
					// }, {
					// 	content: '领导思想：学习进行时主题大会',
					// 	src:'../../static/party_building/assets/img/two.jpg'
					// }, {
					// 	content: '党的十九届大会胜利召开',
					// 	src:'../../static/party_building/assets/weitu.png'
					// }, {
					// 	content: '五一劳动节主题：粒粒皆辛苦',
					// 	src:'../../static/party_building/assets/img/three.jpg'
					// },
					],
					current: 0,
					filesupload:[],
			}
		},components:{
				myHead:myHeader,
			},
		methods: {
			 change(e) {
			  this.current = e.detail.current;
		 },/* 预览临时文件 */
		 subimt(){
			 console.log(this.filesupload)
			 let _this = this
			 uni.showModal({
			 	title: '提示',
			 	content: '是否提交',
			 	success: res => {
					if(res.confirm){
						 upBanner(
							_this.filesupload
						 ).then(res=>{
							 uni.navigateBack()
						 })
					}
				},
			 	fail: () => {},
			 	complete: () => {}
			 });
		 },
		 
		 chooseImg(){
		 	let _this = this
		 	uni.chooseImage({
		 		count:9-_this.filesupload.length,
		 		success:(res)=>{
		 			let parma = [];
		 			console.log(res)
		 			res.tempFilePaths.forEach((e, index) => {
		 				parma.push({
		 					name: "files",
		 					file: res.tempFiles[index],
		 					url: e,
		 				})
		 			})
		 			let token = uni.getStorageSync("AuthToken");
		 			uni.uploadFile({
		 				url: '/api/uploadMultipleFiles', //仅为示例，非真实的接口地址
		 				name: 'files',
		 				files: parma,
		 				header: {
		 					'x-access-token': token
		 				},
		 				success: (uploadFileRes) => {
		 					let data = JSON.parse(uploadFileRes.data).data
							data.forEach(item =>{
								_this.filesupload.push({
									"fileUrl":item.url,
									"fileId": item.id,
									"content": " ",
								})
							})
		 				},
		 				fail: res => {
		 					console.log(res)
		 				}
		 			});
		 		},
		 		fail: (res) => {
		 			console.log(res)
		 		},
		 	})
		 }
		},
	}
</script>
<style lang="scss" scoped>	

	@mixin button-commit {
		background: linear-gradient(180deg, #ff5e59, #e20909);
		color: #fff;
	}
.content{
	width: 90%;
	margin:0 auto;
	margin-top: 50upx;
		uni-button{
			@include  button-commit;
		}
	>/deep/ .uni-swiper__warp{
		uni-image{
			// margin:0 auto;
			 
		}
	}
	
	/deep/ .uni-grid{
		.uni-grid-item{
			width: 120upx !important;
			height: 120upx !important;
			margin: 1%;
			uni-image{
			width: 120upx;
			height: 120upx;
			}
		}
	}
	
	.delete{
		width: 20px;
		height: 20px;
		background-color: #e20909;
		color: #FFF;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		position: absolute;
		right: 1px;
		position: absolute;
		top: 0;
	}
}
</style>